<template>
  <a-modal
    title="账单计划"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="model-yz-plan"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-form-item
          label="账单周期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['zq']" :disabled="true"/>
        </a-form-item>
        <a-form-item
          label="免租期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-switch checkedChildren="開" unCheckedChildren="關" v-decorator="['rentFreeFlag', { valuePropName: 'checked' }]" />
        </a-form-item>
        <a-form-item v-show="false"><a-input v-decorator="['rentFree']" /></a-form-item>
        <a-form-item
          label="租金調整"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-switch checkedChildren="開" @change="onSwitchRentAdjustChange" unCheckedChildren="關" v-decorator="['rentAdjustFlag', { valuePropName: 'checked' }]" />
        </a-form-item>
        <a-form-item v-show="false"><a-input v-decorator="['rentAdjust']" /></a-form-item>
       <div v-show="onSwitchRentAdjustChangeFlag">
          <a-form-item
          label="租金"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['rent']" :disabled="true"/>
        </a-form-item>
        <a-form-item
          label="租金調整"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['adjustType', { initialValue: 1 }]" @change="onAdjustTypeChange">
            <a-radio-button :value="1">
              漲
            </a-radio-button>
            <a-radio-button :value="2">
              降
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="租金方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['adjustStyle']" @change="onAdjustStyleChange">
            <a-radio-button :value="1">
              金額
            </a-radio-button>
            <a-radio-button :value="2">
              百分比
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="調整值"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
        <a-input-number
              style="width:100%"
              placeholder="請輸入調整值"
              :precision="2"
              :min="0"
              :max="99999999"
              :step="10"
              v-decorator="['changeMoney', { initialValue: 0, rules: [{required: true, message: '請輸入調整值'}]}]"
              @change="onRentChange"/>
        </a-form-item>
        <a-form-item
          label="調整爲"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['rentWe']" :disabled="true"/>
        </a-form-item>
       </div>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { detailByBillId, ownerLeaseBillEditBillPlan } from '@/api/modular/main/ownerleasebill/ownerLeaseBillManage'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        data: {},
        visible: false,
        confirmLoading: false,
        memberLoading: false,
        id: 0,
        form: this.$form.createForm(this),
        onSwitchRentAdjustChangeFlag: false
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (id) {
        this.ownerLeasePlan(id)
        this.visible = true
      },
      ownerLeasePlan (id) {
        detailByBillId({ id: id }).then((res) => {
          if (res.code === 200) {
            this.data = res.data
            if (this.data.rentAdjustFlag) {
              this.onSwitchRentAdjustChangeFlag = true
            }
            setTimeout(() => {
              this.form.setFieldsValue(
                {
                  id: this.data.id,
                  zq: this.data.zq,
                  rent: this.data.rent,
                  rentFreeFlag: this.data.rentFreeFlag,
                  rentFree: this.data.rentFree,
                  rentAdjustFlag: this.data.rentAdjustFlag,
                  rentAdjust: this.data.rentAdjust,
                  adjustType: this.data.adjustType,
                  adjustStyle: this.data.adjustStyle,
                  changeMoney: this.data.changeMoney,
                  rentWe: this.data.rentWe
                }
              )
            }, 100)
          } else {
            this.$message.error(res.msg) // + res.message
          }
        })
      },
      onSwitchRentAdjustChange(checked) {
        this.onSwitchRentAdjustChangeFlag = checked
      },
      onAdjustTypeChange(e) {
        const adjustType = e.target.value
        const rent = this.form.getFieldValue('rent')
        const changeMoney = this.form.getFieldValue('changeMoney')
        const adjustStyle = this.form.getFieldValue('adjustStyle')
        this.makeAmount(adjustType, rent, changeMoney, adjustStyle)
      },
      onAdjustStyleChange(e) {
        const adjustStyle = e.target.value
        const adjustType = this.form.getFieldValue('adjustType')
        const rent = this.form.getFieldValue('rent')
        const changeMoney = this.form.getFieldValue('changeMoney')
        this.makeAmount(adjustType, rent, changeMoney, adjustStyle)
      },
      onRentChange(e) {
        const adjustType = this.form.getFieldValue('adjustType')
        const rent = this.form.getFieldValue('rent')
        const adjustStyle = this.form.getFieldValue('adjustStyle')
        const changeMoney = e
        this.makeAmount(adjustType, rent, changeMoney, adjustStyle)
      },
      makeAmount(adjustType, rent, changeMoney, adjustStyle) {
        var rentPrice = 0
        if (adjustType === 1) {
          if (adjustStyle === 1) {
            rentPrice = rent + changeMoney
          } else {
            rentPrice = rent + rent * (changeMoney / 100)
          }
        } else {
          if (adjustStyle === 1) {
            rentPrice = rent - changeMoney
          } else {
            rentPrice = rent - rent * (changeMoney / 100)
          }
        }
        if (rentPrice < 0) {
          this.$message.error('調整後的租金不能小於0')
          return
        }
        this.$nextTick(() => {
            this.form.setFieldsValue({
              rentWe: rentPrice
            })
        })
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            if (values.rentWe < 0) {
              this.$message.error('調整後的租金不能小於0')
              return
            }
            ownerLeaseBillEditBillPlan(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(res.msg)// + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.data = {}
        this.id = 0
        this.visible = false
      }
    }
  }
</script>
<style lang="less" scoped>
// .model-yz-plan  /deep/ .ant-modal-content{
//     height: 800px;
//     overflow-y:scroll;
//     overflow-x: hidden;
// }
// .model-yz-plan  /deep/ .ant-modal-content::-webkit-scrollbar {
//   width: 4px;
// }
// .model-yz-plan  /deep/ .ant-modal-content::-webkit-scrollbar-track {
//  background-color:rgb(250, 241, 241);
// }
// .model-yz-plan  /deep/ .ant-modal-content::-webkit-scrollbar-thumb {
//  background-color:rgb(205, 209, 205);
// }
</style>
